<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="page/common/head"></head>
<style>

    @media only screen and (max-width:768px) {
        #content p img{max-width: 74%!important;}
    }
</style>
<body>

<!--导航-->
<th:block th:replace="page/common/nav"></th:block>

<div class="swiper-container swiper-container1">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><a href="#"><img src="/images/banner_class_room_list.jpg" width="100%" height="auto"/></a></div>
    </div>
</div>

<section class="container">
    <div class="p768" style="height: 200px;">
        <h4 class="text-center" style="color: #73BE1F;">CLASSROOM</h4>
        <h3 class="blockTtl en">教室中心</h3>
    </div>
    <div class="ctn">
        <div class="coursecenter">
            <ul>
                <!--/*@thymesVar id="siteDto" type="com.healthtop.dto.SiteDto"*/-->
                <li th:each="m : ${siteDto.classRooms}">
                    <th:block th:if="${m.image != ''}">
                        <a th:href="@{'/site/forwardClassRoom?id='+${m.id}}"><img th:src="${m.image}" alt="">
                            <h3 th:text="${m.name}"></h3>
                            <p th:text="${m.introduce}"></p>
                            <h4><i class="icon-angle-right"></i>进去看看</h4>
                        </a>
                    </th:block>
                    <th:block th:if="${m.image == ''}">
                        <a th:href="@{'/site/forwardClassRoom?id='+${m.id}}"><img src="/images/f97ddbd3662898d50b50e30c6cb39458.jpg" alt="">
                            <h3 th:text="${m.name}"></h3>
                            <p th:text="${m.introduce}"></p>
                            <h4><i class="icon-angle-right"></i>进去看看</h4>
                        </a>
                    </th:block>
                </li>
            </ul>
        </div>
    </div>
    <div class="p768" style="height: 200px;"></div>
</section>
<th:block th:replace="page/common/footer"></th:block>
</body>
</html>
<script type="text/javascript">

    function wiper() {
        var sum;
        if($(window).width() >= 420){sum = 3;}else{sum=1;}
        var swiper1 = new Swiper('.swiper-container1', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            spaceBetween: 60,
            centeredSlides: true,
            autoplay: 5000,
            autoplayDisableOnInteraction: false
        });
        var swiper2 = new Swiper('.swiper-container2', {
            pagination: '.swiper-pagination',
            slidesPerView: sum,
            paginationClickable: true,
            spaceBetween: 10,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
        });
    }

    $(function () {
        wiper();
    });

    $(window).resize(function () {
        wiper();
    });
</script>